<template>
	<div>
		<div class="themeList ">
			<div class="themeItem" v-for="(item,index) in list" :key="index" @click="godetail(item.active_id)">
				<van-image class="activeImg" width="164px" height="98px" fit="contain" round :src="item.default_img" />
				<div class="themeInfo">
					<div class="name van-ellipsis">{{item.title}}</div>
					<div class="date">{{item.active_start_date}}</div>
					<div class="pricebox">
						<div class="price">¥ {{item.price_show}}</div>
						<div :class="['status' ,'status'+item.active_status]" v-if="item.active_status_show">
							{{item.active_status_show}}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="endBottom" v-if="list.length>10">已经到底啦</div>
	</div>
</template>

<script>
	import {
		ActiveIndex
	} from '@/http/active'

	export default {
		name: "allactive",
		data() {
			return {
				type: 0,
				list: [],
				page: 1,
				take: 10
			}
		},
		created() {
			this.type = this.$route.query.type;
			this._ActiveIndex()
		},
		methods: {
			_ActiveIndex() {
				ActiveIndex(this.type, this.page, this.take).then(res => {
					if (res.status == 1) {
						this.list = res.data
					}
				})
			},
			godetail(id) {
				this.$router.push({
					path: `/active/acDetail?active_id=${id}`
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.themeList {
		padding: 0 24px;

		.themeItem {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 30px;
			border-bottom: 1px solid $bordercolor;
			margin-top: 30px;

			.van-image {
				flex-shrink: 0;
				width: 328px;
				border-radius: 20px;
			}

			.themeInfo {
				flex: 1;
				height: 196px;
				display: flex;
				margin: 10px 10px 10px 23px;
				justify-content: space-between;
				flex-direction: column;
				padding: 15px 0;

				.name {
					font-size: 30px;
					max-width: 330px;
					flex-shrink: 0;
				}

				.date {
					font-size: 26px;
					color: #646464;
				}

				.limitBox {
					color: $fzColor;
					font-size: 28px;

					.max {
						color: #757575;
						font-size: 28px;
					}
				}

				.pricebox {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.price {
						color: $priceColor;
						font-size: 30px;
					}

					.status {
						border-radius: 20px;
						padding: 10px 25px;
						color: #fff;
						font-size: 28px;

						&.status1 {
							background-color: #fd9e18;
						}

						&.status2 {
							background-color: #f75c58;
						}

						&.status3 {
							background-color: #f75c58;
						}

						&.status4 {
							background-color: #dadada;
						}

						&.status5 {
							background-color: #dadada;
						}
					}
				}
			}
		}
	}

	.endBottom {
		padding: 71px 0;
		text-align: center;
		font-size: 26px;
		color: #ADADAD;
	}
</style>
